import productTypeApi from '@/api/base/ProductTypeApi.js'
import productModelApi from '@/api/base/ProductModelApi.js'
import page from '@/mixins/page'
import {Loading} from "element-ui";

export default {
    name: "productType",
    mixins: [page],
    data() {
        return {
            // 参数
            params: {
                name: '',
                typeId:'',
                remark: '',
            },
            // 表单弹窗信息
            formDialog: {
                loading: false,
                title: '',
                state: '',
                visible: false,
            },
            // 表单数据
            formData: {
                name: '',
                parentId: '',
                remark: '',
            },
            detail: {
                visible: false,
                title: '详情',
                data: {},
            },
            rules: {
                name: [{required: true, message: "请输入分类名称", trigger: "blur"}],
                parentId: [{required: true, message: "请选择父级", trigger: "blur"}],
            },
            map: {
                productTypeTrees: []
            },
            view: {
                typeTreeLoading: false,
                modelFormVisible: false,
                modelFormLoading: false,
                modelFormState: "insert",
                modelFormTitle: "新增分类",
            },
            // 表单数据
            modelFormData: {
                name: '',
                typeId: '',
                remark: '',
            },
            modelRules: {
                name: [{required: true, message: "请输入型号名称", trigger: "blur"}],
                parentId: [{required: true, message: "请选择父级", trigger: "blur"}],
            },
            treeProps: {
                label: 'name',
                children: 'children',
            },
            temp: {
                clickNodeId: null,
                clickNodeData: {},
                nodeParentName: ""
            }
        }
    },
    methods: {

        /**
         * 数据准备阶段
         */
        init() {
            Promise.all([this.listProductTypeTree()]).then(res => {
            })
        },

        // 查询
        page() {
            this.table.loading = true
            this.$rq.query(productModelApi.url, {
                ...this.params,
                ...this.sorting,
                pageSize: this.pagination.pageSize,
                pageOn: this.pagination.pageOn
            }).then(res => {
                if (res.data && Array.isArray(res.data.rows) && res.data.rows.length) {
                    this.pagination.total = res.data.total
                    this.table.data = res.data.rows
                } else {
                    this.total = 0
                    this.table.data = []
                }
            }).finally(() => {
                // 无论失败还是成功, 都执行的操作
                this.table.loading = false
            })
        },
        // 新增
        handleModelInsert() {
            if (this.temp.clickNodeId === null) {
                this.$message.warning('请先选中类型')
                return
            }
            this.formReset()
            this.view.modelFormVisible = true
            this.view.modelFormTitle = '新增'
            this.view.modelFormState = 'insert'
        },
        // 编辑
        handleModelEdit({row}) {
            this.formReset()
            this.modelFormSet(row)
            this.$nextTick(() => {
                this.view.modelFormTitle = '修改'
                this.view.modelFormState = 'edit'
                this.view.modelFormVisible = true
            })
        },
        // 设置表单
        modelFormSet(data) {
            this.modelFormData.id = data.id
            this.modelFormData.name = data.name
            this.modelFormData.typeId = data.typeId
            this.modelFormData.remark = data.remark
        },
        modelFormSave() {
            this.$refs.modelForm.validate(valid => {
                if (valid) {
                    if (this.view.modelFormState === 'insert') {
                        this.view.modelFormLoading = true
                        this.modelFormData.typeId = this.temp.clickNodeId
                        this.$rq.insert(productModelApi.url, this.modelFormData).then(res => {
                            this.view.modelFormVisible = false
                            this.page();
                        }).finally(() => {
                            this.view.modelFormLoading = false
                        })
                    } else if (this.view.modelFormState === 'edit') {
                        this.view.modelFormLoading = true
                        this.$rq.updateById(productModelApi.url, this.modelFormData).then(res => {
                            this.view.modelFormVisible = false
                            this.page();
                        }).finally(() => {
                            this.view.modelFormLoading = false
                        })
                    }
                }
            })
        },
        // 关闭表单
        modelFormClose() {
            this.view.modelFormVisible = false
        },
        // 表单重置
        formReset() {
            if (this.$refs.form) {
                this.$refs.form.clearValidate()
                this.$refs.form.resetFields()
            }
            if (this.$refs.modelForm) {
                this.$refs.modelForm.clearValidate()
                this.$refs.modelForm.resetFields()
            }
            this.formData = {
                name: '',
                parentId: '',
                remark: '',
            }
        },
        // 详情
        handleModelDetail({row, column, $index}) {
            this.detail.data = row
            this.detail.visible = true
        },
        // 关闭详情
        detailModelClose() {
            this.detail.visible = false
        },
        // 删除(批量)
        handleModelDel() {
            if (this.table.selectionRows.length) {
                let ids = this.table.selectionRows.map(e => e.id)
                this.$confirm('确认删除?', {
                    title: '提示',
                    confirmButtonText: '删除',
                    type: 'warning',
                    beforeClose: (action, instance, done) => {
                        if (action == 'confirm') {
                            instance.confirmButtonLoading = true
                            instance.confirmButtonText = '执行中...'
                            this.$rq.deleteByIds(productModelApi.url, ids).then(res => {
                                this.$message.success('删除成功')
                                this.page()
                            }).finally(() => {
                                done()
                                instance.confirmButtonLoading = false;
                            })
                        } else {
                            done()
                        }
                    }
                })
            } else {
                this.$message.warning('请至少选择一行')
            }
        },
        // ---------------------------------- 分类相关操作
        /**
         * 新增分类
         * @param node
         */
        addType(node) {
            this.temp.nodeParentName = node.data.name
            this.formReset()
            this.formDialog.visible = true
            this.formDialog.title = '新增'
            this.formDialog.state = 'insert'
            this.formData.parentId = node.data.id;
        },
        editType(node) {
            this.temp.nodeParentName = node.parent.data.name
            this.formReset()
            this.formSet(node.data)
            this.$nextTick(() => {
                this.formDialog.visible = true
                this.formDialog.title = '修改'
                this.formDialog.state = 'edit'
            })
        },
        /**
         * 删除分类
         */
        delType(node) {
            this.$confirm('确认删除?', {
                title: '提示',
                confirmButtonText: '删除',
                type: 'warning',
                beforeClose: (action, instance, done) => {
                    if (action == 'confirm') {
                        instance.confirmButtonLoading = true
                        instance.confirmButtonText = '执行中...'
                        this.$rq.deleteByIds(productTypeApi.url, node.data.id).then(res => {
                            this.$message.success('删除成功')
                            this.listProductTypeTree()
                        }).finally(() => {
                            done()
                            instance.confirmButtonLoading = false;
                        })
                    } else {
                        done()
                    }
                }
            })
        },
        /**
         * 加载产品分类树结构
         * @returns {Promise<void>}
         */
        listProductTypeTree() {
            this.view.typeTreeLoading = true
            return productTypeApi.listTree().then(res => {
                this.map.productTypeTrees = res.data
                this.view.typeTreeLoading = false
            })
        },
        nodeClick(data) {
            this.temp.clickNodeId = data.id
            this.temp.clickNodeData = data
            this.params.typeId = data.id
            this.page()
        },
        formSet(data) {
            this.formData.id = data.id
            this.formData.name = data.name
            this.formData.parentId = data.parentId
            this.formData.remark = data.remark
        },
        /**
         * 保存
         */
        formSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.formDialog.state === 'insert') {
                        this.formDialog.loading = true
                        this.$rq.insert(productTypeApi.url, this.formData).then(res => {
                            this.formDialog.visible = false
                            this.listProductTypeTree();
                        }).finally(() => {
                            this.formDialog.loading = false
                        })
                    } else if (this.formDialog.state === 'edit') {
                        this.formDialog.loading = true
                        this.$rq.updateById(productTypeApi.url, this.formData).then(res => {
                            this.formDialog.visible = false
                            this.listProductTypeTree();
                        }).finally(() => {
                            this.formDialog.loading = false
                        })
                    }
                }
            })
        },
        // 关闭详情
        detailClose() {
            this.detail.visible = false
        },
        // 关闭表单
        formClose() {
            this.formDialog.visible = false
        },

    },
    mounted() {
        this.page()
    },
    created() {
        this.init();
    }
}
